<template>
  <Modal title="修改"
         v-model="modelView"
         :mask-closable="false"
         :fullscreen="false"
         :width="620"
         :closable="false"
         @on-visible-change="changeVisible">
    <Form :model="formData" :label-width="80">
      <Row>
        <Col :span="11">
          <FormItem label="权限编码:">
            <Input v-model="formData.autCode"/>
          </FormItem>
        </Col>
      </Row>
      <Row>
        <Col :span="11">
          <FormItem label="角色名称:">
            <Input v-model="formData.autName"/>
          </FormItem>
        </Col>
      </Row>
    </Form>
    <div slot="footer">
      <Button type="text" @click="cancel">取消</Button>
      <Button type="primary" :loading="buttonLoading" @click="ok">确定</Button>
    </div>
  </Modal>
</template>

<script>
  import {modify} from "@/api/sys/aut"

  export default {
    name: "update",
    props: {
      visible: {
        type: Boolean,
        default: false
      },
      initFormData: {}
    },
    data() {
      return {
        modelView: false,
        formData: {
          id: null,
          autCode: null,
          autName: null
        },
        buttonLoading: false
      }
    },
    watch: {
      visible(newVal) {
        this.modelView = newVal
      }
    },
    methods: {
      changeVisible() {
        if (this.modelView) {
          this.formData = JSON.parse(JSON.stringify(this.initFormData))
        } else {
          this.formData = {}
        }
        this.$emit('update:visible', this.modelView)
      },
      cancel() {
        this.modelView = false
      },
      ok() {
        const self = this
        const params = {
          id: self.formData.id,
          autCode: self.formData.autCode,
          autName: self.formData.autName
        }
        self.buttonLoading = true
        modify(params)
          .then(response => {
            self.buttonLoading = false
            self.modelView = false
            self.$Message.success({
              content: '修改权限信息成功'
            })
            self.$emit('on-ok', params)
          })
          .catch((err) => {
            self.buttonLoading = false
            self.$Message.error({
              content: err,
              duration: 10,
              closable: true
            })
          })
      }
    }
  }
</script>

<style scoped>

</style>
